// colors
@import './lib/colors';

// bootstrap
@import '~bootstrap/scss/bootstrap-reboot.scss';
@import '~bootstrap/scss/bootstrap-grid.scss';

$spinner-color: $font-color;
$spinner-size: 2.333rem;

// spinner
@import './lib/spinner';

// mixins
@import "~bootstrap/scss/variables";

@import "~bootstrap/scss/mixins/breakpoints";
@import "~bootstrap/scss/mixins/grid-framework";
@import "~bootstrap/scss/mixins/grid";

// base
html, body  {
  font-family:  Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
}

html {
  height: 100%;
  min-height: 100%;
}

body {
  background-color: $bg-color;
  color: $font-color;
}

// font load
.wf-active {
  html, body {
    font-family: 'Roboto', sans-serif;
  }
}

// critical load
.critical {

  min-height: 100%;
  height: 100%;

  .loading {
    display: block;
    height: 100%;
    min-height: 100%;
    position: relative;
    width: 100%;

    .spinner {
      left: 50%;
      margin-left: -($spinner-size / 2);
      margin-top: -($spinner-size / 2);
      position: absolute;
      top: 50%;
    }

  }

}

.fade-in {
  animation-name: fadeIn;
  animation-duration: 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

// overwrites
header {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@include media-breakpoint-up(md) {
  body {
    font-size: 1.175rem;
  }
}

@include media-breakpoint-up(lg) {
  body {
    font-size: 1.375rem;
  }
}


@include media-breakpoint-up(xl) {
  body {
    font-size: 1.375rem;
  }
}
